<input type="hidden" name="goods.id" value="#(goods.id)">

<fieldset class="layui-elem-field">
	<legend>基本信息</legend>
	<div class="layui-field-box">

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">标题：</label>
				<div class="layui-input-inline">
					<input type="text" name="goods.title" lay-verify="required|title" autocomplete="off" class="layui-input" value="#(goods.title)">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">分类：</label>
				<div class="layui-input-inline">
					<select name="goods.categoryId" lay-verify="required">
						<option value="">-- 请选择 --</option>
						#for(goodsCategory : goodsCategoryList)
						<option value="#(goodsCategory.id)" #if(goodsCategory.id == goods.categoryId) selected #end>#(goodsCategory.name)</option>
						#end
					</select>
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">标签：</label>
				<div class="layui-input-inline">
					<input type="text" name="goods.label" lay-verify="required" autocomplete="off" class="layui-input" value="#(goods.label)">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">状态：</label>
				<div class="layui-input-block">
					<input type="radio" name="goods.status" lay-verify="required" value="on" title="启用" #if(goods.status == 'on') checked #end>
					<input type="radio" name="goods.status" lay-verify="required" value="off" title="禁用" #if(goods.status == 'off' || goods.status == null) checked #end>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">起始点击：</label>
				<div class="layui-input-inline">
					<input type="text" name="goods.fakeHits" lay-verify="required|fakeHits" autocomplete="off" class="layui-input" value="#(goods.fakeHits)">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">点击数：</label>
				<div class="layui-input-inline">
					<input type="text" name="goods.hits" autocomplete="off" class="layui-input" value="#(goods.hits)" disabled="disabled">
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">关键字：</label>
			<div class="layui-input-block">
				<input type="text" name="goods.keywords" placeholder="关键字之间用英文逗号隔开，如：酒,美酒,高度酒" class="layui-input" value="#(goods.keywords)">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">广告词：</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" name="goods.adWords" class="layui-textarea">#(goods.adWords)</textarea>
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">简单描述：</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" name="goods.remark" class="layui-textarea">#(goods.remark)</textarea>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">购买链接：</label>
			<div class="layui-input-block">
				<input type="text" name="goods.buyUrl" class="layui-input" placeholder="填写第三方商城采购链接" value="#(goods.buyUrl)">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">关联商品：</label>
			<div class="layui-input-block">
				<input type="text" name="goods.linkGoodsIds" class="layui-input" placeholder="关联商品最好不要超过3个，商品ID用英文逗号隔开，如：23,34,2" value="#(goods.linkGoodsIds)">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品详情：</label>
			<div class="layui-input-block">
				<script id="ID_goods_content" name="goods.content" type="text/plain" style="height:400px;">#(goods.content)</script>
			</div>
		</div>

	</div>
</fieldset>


<fieldset class="layui-elem-field">
	<legend>商品LOGO图</legend>
	<div class="layui-field-box">
		<input type="hidden" name="goods.originalImg" value="#(goods.originalImg)" id="ID_goods_original_img">
		<input type="hidden" name="goods.thumbImg" value="#(goods.thumbImg)" id="ID_goods_thumb_img">
		<div class="layui-input-inline layui-upload">
			<button type="button" class="layui-btn" id="ID_upload_image_btn">选择图片</button>
		</div>
		<div class="layui-upload-list">
			<img onclick="imgReview(this);" style="max-height: 100px; max-width: 100px" class="layui-upload-img" id="ID_upload_image" src="#(goods.original_img)">
			<p id="ID_upload_image_text"></p>
		</div>
		<div class="layui-form-mid layui-word-aux">文件大小限制800K，上传成功可点击图片预览</div>
	</div>
</fieldset>

<fieldset class="layui-elem-field">
	<legend>商品规格</legend>
	<div class="layui-field-box">
		<div class="layui-form-item">
			<div class="layui-row">
		    	<div id="ID_goods_spec_edit" class="layui-col-xs12 layui-col-sm9 layui-col-md6">
					<div class="layui-row">
						<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
							<label class="layui-form-label">规格</label>
						</div>
						<div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
							<label class="layui-form-label">值</label>
						</div>
						<div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
							<label class="layui-form-label">排序</label>
						</div>
						<div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
							<label class="layui-form-label"><a onclick="addGoodsSpec();" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-add-circle"></i></a></label>
						</div>
					</div>
					#if(null != goods.id)
		    		#for(goodsSpec : goods.goodsSpecList)
					<div class="layui-row" id="ID_old_goods_spec_#(goodsSpec.id)">
						<input type="hidden" name="editSpecTypes" value="old">
						<input type="hidden" name="editGoodsSpecIds" value="#(goodsSpec.id)">
						<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
							<select name="editSpecIds" lay-verify="required">
								#for(specItem : specItemList)
								<option value="#(goodsSpec.specItemId)" #if(specItem.id == goodsSpec.specItemId) selected #end>#(specItem.name)</option>
								#end
							</select>
						</div>
						<div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
							<input type="text" name="editSpecValues" class="layui-input" placeholder="不要以冒号结尾" lay-verify="required" value="#(goodsSpec.specItemValue)">
						</div>
						<div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
							<input type="text" name="editSpecSortNums" class="layui-input" lay-verify="required" value="#(goodsSpec.sortNum)">
						</div>
						<div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
							<label class="layui-form-label"><a onclick="delGoodsSpec('ID_old_goods_spec_#(goodsSpec.id)');" class="layui-btn layui-btn-danger layui-btn-sm del-spec-item"><i class="layui-icon layui-icon-delete"></i></a></label>
						</div>
					</div>
					#end
					#end
				</div>
			</div>
		</div>
	</div>
</fieldset>


<fieldset class="layui-elem-field">
	<legend>图片布局</legend>
	<div class="layui-field-box">
		<div class="layui-form-item">
			<div class="layui-row">
		    	<div id="ID_goods_img_place_edit" class="layui-col-xs12 layui-col-sm9 layui-col-md6">
					<div class="layui-row">
						<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
							<label class="layui-form-label">布局类型</label>
						</div>
						<div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
							<label class="layui-form-label">排序</label>
						</div>
						<div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
							<label class="layui-form-label"><a onclick="addImagePlace();" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-add-circle"></i></a></label>
						</div>
					</div>
					#if(null != goods.id)
		    		#for(goodsImagePlace : goods.goodsImagePlaceList)
					<div class="layui-row" id="ID_old_goods_img_place_#(goodsImagePlace.id)">
						<input type="hidden" name="editImagePlaceTypes" value="old">
						<input type="hidden" name="editGoodsPlaceIds" value="#(goodsImagePlace.id)">
						<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
							<select name="editImagePlaceIds" lay-verify="required">
								#for(imgPlace : imgPlaceDict)
								<option value="#(imgPlace.id)" #if(imgPlace.value == goodsImagePlace.code) selected #end>#(imgPlace.name)</option>
								#end
							</select>
						</div>
						<div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
							<input type="text" name="editImagePlaceSortNums" class="layui-input" lay-verify="required" value="#(goodsImagePlace.sortNum)">
						</div>
						<div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
							<label class="layui-form-label"><a onclick="delImagePlace('ID_old_goods_img_place_#(goodsImagePlace.id)');" class="layui-btn layui-btn-danger layui-btn-sm del-spec-item"><i class="layui-icon layui-icon-delete"></i></a></label>
						</div>
					</div>
					#end
					#end
				</div>
			</div>
		</div>

	</div>
</fieldset>

<fieldset class="layui-elem-field">
	<legend>操作区</legend>
	<div class="layui-field-box">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-danger" lay-submit="" lay-filter="component-form-demo1">保存基本信息</button>
		</div>
	</div>
</fieldset>

<script src="#(ctx)/frame/layui/layui.all.js" charset="utf-8"></script>

<!-- ***************************************************************** -->

<script>
layui.use(['form', 'layedit', 'upload'], function(){
	var $ = layui.$, form = layui.form, layedit = layui.layedit, upload = layui.upload;

	form.verify({
		title : function(value, item) {
			if (value.length < 3 || value.length > 100) {
				return '标题必须3到100字符';
			}
		},
		fakeHits : function(value, item) {
			if (value < 0 || value > 32767) {
				return '初始点击数必须为0 - 32767以内！';
			}
		}
	});

	// PC端图片上传
	var uploadInst = upload.render({
		elem: '#ID_upload_image_btn',
		url: '#(ctx)/admin/upload/ajaxUpload',
		accept : 'images',
		size : 800, // 限制文件大小，单位 KB
		before: function(obj){
			//预读本地文件示例，不支持ie8
			obj.preview(function(index, file, result){
				$('#ID_upload_image').attr('src', result); //图片链接（base64）
			});
		},
		done: function(res){
			//如果上传失败
			if(res.code != 0){
				return layer.alert('上传失败');
			}
			//上传成功
			// 处理后台中传回的文件名
			for(var i = 0; i < res.count; i++){
				var url = eval("res.imgUrl" + i); // 取得图片对应的Key
				// $("#ID_upload_image").wrap('<a target="_review" href = "' + url + '"><a>');
				$("#ID_goods_original_img").val(url);
				$("#ID_goods_thumb_img").val(url);
			}
		},
		error: function(){
			//演示失败状态，并实现重传
			var reUploadText = $('#ID_upload_image_text');
			reUploadText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs LAY-reupload">重试</a>');
			reUploadText.find('.LAY-reupload').on('click', function(){
				uploadInst.upload();
			});
		}
	});

	// 这里定义窗口中的各个按扭操作
	var active = {
		reload : function() {
			// 执行重载
			table.reload('LAY-main-table-ID', {
				page : {
					curr : 1 //重新从第 1 页开始
				},
				where : {
					name : $('#name').val(),
					goodsCategory : $('#goodsCategory').val(),
					status : $('#status').val(),
					sortField : $("#sortField").val(),
					sortType : $("#sortType").val()
				}
			});
		},
		back : function() {
			history.back(-1);
		},
		editLayout : function(){
			window.location.href="#(ctx)/admin/goods/editLayout?id=" + "#(goods.id)";
		}
	};

	// 用于响应各个按钮的点击事件
	$('.layui-btn').on('click', function() {
		var type = $(this).data('type');
		active[type] ? active[type].call(this) : '';
	});

});

layui.form.render('select'); // layui的坑，动态创建下拉选择后必须调用此句，否则下拉不起作用
layui.form.render('radio'); // 同上

// 添加新商品规则
function addGoodsSpec(){
	// 从例子中复制DIV对象
	var div = layui.$([layui.$("#ID_goods_spec_sample").html()].join(""));

	// 绑定删除按钮
	div.find('.del-new-goods-spec').on('click', function() {
		div.remove();
	});

	// 让DIV显示并追加到编辑DIV中
	layui.$("#ID_goods_spec_edit").css("display","block");
	layui.$("#ID_goods_spec_edit").append(div);
	layui.form.render('select'); // layui的坑，动态创建下拉选择后必须调用此句，否则下拉不起作用
}

// 删除旧商品规格
function delGoodsSpec(objId){
	var obj = layui.$("#" + objId);
	layer.confirm('确认删除此记录么？', function(index){
		obj.find("input[name='editSpecTypes']").val("del");
		//obj.find("input").removeAttr("lay-verify");
		obj.css("display","none");
		layer.close(index);
	});
}

//添加图片布局
function addImagePlace(){
	// 从例子中复制DIV对象
	var div = layui.$([layui.$("#ID_image_place_sample").html()].join(""));

	// 绑定删除按钮
	div.find('.del-image-place-spec').on('click', function() {
		div.remove();
	});

	// 让DIV显示并追加到编辑DIV中
	layui.$("#ID_goods_img_place_edit").css("display","block");
	layui.$("#ID_goods_img_place_edit").append(div);
	layui.form.render('select'); // layui的坑，动态创建下拉选择后必须调用此句，否则下拉不起作用
}

// 删除图片布局
function delImagePlace(objId){
	var obj = layui.$("#" + objId);
	layer.confirm('确认删除此记录么？', function(index){
		obj.find("input[name='editImagePlaceTypes']").val("del");
		//obj.find("input").removeAttr("lay-verify");
		obj.css("display","none");
		layer.close(index);
	});
}

//预览图片
function imgReview(obj){
	layer.photos({
		photos: layui.$(obj).parent()
	});
}

var toolbars = [[
    'source','fullscreen','undo','redo','|',
	'bold','italic','underline','fontborder','strikethrough','removeformat','formatmatch','autotypeset','blockquote','pasteplain','|',
	'forecolor','backcolor','|',
	'rowspacingtop','rowspacingbottom','lineheight','|',
	'customstyle','paragraph','fontfamily','fontsize','|',
	'justifyleft','justifyright','justifycenter','justifyjustify','touppercase','tolowercase','|',
    'link','unlink','anchor','|',
	'imagenone','imageleft','imageright','imagecenter','|',
	'simpleupload','horizontal','time','date','|',
	'inserttable','deletetable',
]];

// 初始化面试编辑器
var ue = UE.getEditor('ID_goods_content', {
	toolbars: toolbars,
	autoHeightEnabled: true,
	autoFloatEnabled: true
});

</script>
